<template>
	<div class="page-container">
		<el-container>
			<el-aside width="auto">
				<CommonAside></CommonAside>
			</el-aside>
			<el-container>
				<el-header>
					<common-header></common-header>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import CommonHeader from '../components/CommonHeader.vue'
	import CommonAside from '../components/CommonAside.vue'
	export default {
		data() {
			return {}
		},
		components: {
			CommonHeader,
			CommonAside,
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	.page-container {
		width: 100%;
		height: 100vh;
		margin: 0;
		padding: 0;
	}

	.el-container {
		margin: 0;
		padding: 0;

		.el-header {
			height: 15vh;
			padding: 0;
		}

		.el-main {
			height: 85vh;
			padding: 20px;
			text-align: left;
			line-height: normal;
		}

		.el-aside {
			height: 100vh;
		}
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
	}
</style>